import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import YModel from '../../pages/Home/Model';
import Link from 'umi/link';
// import { Row, Col } from 'antd';

import wechat1 from './assets/wechat1.png';
import wechat2 from './assets/wechat2.png';

class Footer extends React.Component {
  static defaultProps = {
    className: 'footer',
  };

  state = {
    visible: false,
      visibleType : 1,
  }

  getLiChildren = (data) =>
    data.map((item, i) => {
      return (
        <section key={i.toString()} {...item} title={null} content={null}>
          <h2 {...item.title}>
            {typeof item.title.children === 'string' &&
            item.title.children.match(
              /\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/
            ) ? (
              <img src={item.title.children} width="100%" alt="img" />
            ) : (
              item.title.children
            )}
          </h2>
          <div {...item.content}>{item.content.children}</div>
        </section>
    );
  });

  handleModalVisible = (visibleType = 1) => {
    let flag = {}
    if(!isNaN(visibleType)) {
      flag = {
        visibleType
      }
    }
    this.setState(state => ({
      ...state,
      visible: !state.visible,
      ...flag,
    }));
  }

  render() {
    const { visible, visibleType } =this.state;
    const { ...props } = this.props;
    const dataSource = {
      wrapper: { className: 'home-page-wrapper footer-bar-wrapper' },
      OverPack: { className: 'footer', playScale: 0.2 },
      block: {
        className: 'content',
        children: [
          {
            name: 'block0',
            xs: 24,
            md: 6,
            className: 'block',
            title: {
              className: 'logo',
              children: '@C照圈',
            },
            content: {
              children: 'C照圈是一个网约车车主生活圈，我们尽力让我们的网约车车主把开车打造成一种生活方式，是一份体面有尊严，有客观收入的职业。',
            },
          },
          {
            name: 'block1',
            xs: 24,
            md: 6,
            className: 'block',
            title: { children: '公司' },
            content: {
              children: (
                <>
                  <p>
                    {' '}
                    <Link to="about">关于我们</Link>
                  </p>{' '}
                  <p><a href="tel:18573099808">联系电话：18573099808</a></p>
                  <p><a href="tel:18573099808">联系QQ：1090127630</a></p>
                  <div className="qrcode" style={{paddingTop: 5}}>
                    <section className="item">
                      <h4>李经理</h4>
                      <img src={wechat1} width="115" />
                    </section>
                    <section className="item">
                      <h4>蔡经理</h4>
                      <img src={wechat2} width="115" style={{marginLeft: 5}} />
                    </section>
                  </div>
                </>
              ),
            },
          },
          // {
          //   name: 'block2',
          //   xs: 24,
          //   md: 6,
          //   className: 'block',
          //   title: { children: '关注' },
          //   content: {
          //     children: (
          //       <span>
          //         <p>
          //           {' '}
          //           <a href="#">微博</a>{' '}
          //         </p>{' '}
          //         <p>
          //           {' '}
          //           <a href="#">微信公众号</a>{' '}
          //         </p>{' '}
          //         <p>
          //           {' '}
          //           <a href="#">今日头条</a>{' '}
          //         </p>{' '}
          //         <p>
          //           {' '}
          //           <a href="#">抖音号</a>{' '}
          //         </p>{' '}
          //         <p>
          //           {' '}
          //           <a href="#">百度熊掌号</a>{' '}
          //         </p>
          //       </span>
          //     ),
          //   },
          // },
          {
            name: 'block3',
            xs: 24,
            md: 6,
            className: 'block',
            title: { children: '廉正与纪律' },
            content: {
              children: (
                <span>
                  <p>
                    {' '}
                    <a href="JavaScript:void(0)" onClick={this.handleModalVisible.bind(this, 1)}>廉政举报</a>{' '}
                  </p>{' '}
                  <p>
                    {' '}
                    <a href="JavaScript:void(0)" onClick={this.handleModalVisible.bind(this, 2)}>投诉与建议</a>{' '}
                  </p>{' '}
                </span>
              ),
            },
          },
          {
            name: 'block4',
            xs: 24,
            md: 6,
            className: 'block',
            title: { children: '联系我们' },
            content: {
              children: (
                <span>
                  <p>
                    {/*<a href="#">长沙办公室：长沙市芙蓉区光谷国际广场A座13楼1306</a>{' '}*/}
                    长沙办公室：长沙经济开发区板仓南路29号新长海中心服务外包基地3栋A座501                   
                  </p>
                  <p> 武汉办公室：武汉市武昌区楚河汉街万达SOHO环球国际中心3号楼1507室 </p>
                </span>
              ),
            },
          },
        ],
      },
      copyrightWrapper: { className: 'copyright-wrapper' },
      copyright: {
        className: 'copyright',
        children: (
          <span>
            湖南一白电子商务有限公司   湘ICP备18012645号-1 www.bailiangbaibo.com
          </span>
        ),
      },
    };
    // const { dataSource } = props;
    delete props.dataSource;
    delete props.isMobile;
    const childrenToRender = this.getLiChildren(dataSource.block.children);
    const payload = {
      visible,
      visibleType,
      handleModalVisible: this.handleModalVisible
    }
    return (
      <div {...props} {...dataSource.wrapper}>
        <YModel {...payload} />
        <OverPack {...dataSource.OverPack}>
          <QueueAnim
            type="bottom"
            key="ul"
            leaveReverse
            component={({children, ...payload}) => <section {...payload}>{children}</section>}
            {...dataSource.block}
          >
            {childrenToRender}
          </QueueAnim>
          <TweenOne
            animation={{ y: '+=30', opacity: 0, type: 'from' }}
            key="copyright"
            {...dataSource.copyrightWrapper}
          >
            <div {...dataSource.copyright}>
              {dataSource.copyright.children}
            </div>
          </TweenOne>
        </OverPack>
      </div>
    );
  }
}

export default Footer;